<!--
 * @Description: 底部第二个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-18 17:24:31
-->
<!--
 * @Description: 右侧第二个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-18 17:26:24
-->
<template>
  <div>
    <!-- 2.创建图表容器 -->
    <div ref="container" style="height:150px"></div>
  </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
import { get } from '@/utils/request'
// 1.引入momentjs commonjs 
let moment = require('moment');
export default {
  data() {
    return {
      tempData:[],
    };
  },
  computed: {},
  methods: {
    async getTempData() {
      let res = await get('/dashboard/pageQueryData', {
        page: 1,
        pageSize: 30,
        engineer_id: 2,
        device_id: 1
      });
      // [{insert_time,tempature},{},{},{}]
      res.data.list.forEach((item,index,arr) => {
        // (需要格式化的时间) (格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].pm10=15.4;
        // temp.push(arr[0],arr[19],arr[39],arr[59],arr[79],arr[99])
      });
      this.tempData = res.data.list;
      // this.loadCharts();
      // console.log(res,'获取响应');
      this.createPie();
    },
    createPie() {
      const uvBillData = [
  { time: '2022-10', value: 16, type: '室内温度' },
  { time: '2022-11', value: 17, type: '室内温度' },
  { time: '2022-12', value: 19, type: '室内温度' },
  { time: '2023-01', value: 20, type: '室内温度' },
  { time: '2023-02', value: 15, type: '室内温度' },
  { time: '2022-10', value: -5, type: '室外温度' },
  { time: '2022-11', value: -8, type: '室外温度' },
  { time: '2022-12', value: -6, type: '室外温度' },
  { time: '2023-01', value: -12, type: '室外温度' },
  { time: '2023-02', value: -10, type: '室外温度' },
];
     const transformData = [
  { time: '2022-10', count: -10, name: '最低温' },
  { time: '2022-11', count: -14, name: '最低温' },
  { time: '2022-12', count: -12, name: '最低温' },
  { time: '2023-01', count: -13, name: '最低温' },
  { time: '2023-02', count: -15, name: '最低温' },
  { time: '2022-10', count: -4.6, name: '平均温度' },
  { time: '2022-11', count: -2.2, name: '平均温度' },
  { time: '2022-12', count: -1.8, name: '平均温度' },
  { time: '2023-01', count: -5.7, name: '平均温度' },
  { time: '2023-02', count: -4.8, name: '平均温度' },
  { time: '2022-10', count: 15, name: '最高温度' },
  { time: '2022-11', count: 18, name: '最高温度' },
  { time: '2022-12', count: 9, name: '最高温度' },
  { time: '2023-01', count: 14, name: '最高温度' },
  { time: '2023-02', count: 10, name: '最高温度' },
];

const dualAxes = new DualAxes(this.$refs.container, {
  data: [uvBillData, transformData],
  xField: 'time',
  yField: ['value', 'count'],
  geometryOptions: [
    {
      geometry: 'line',
      seriesField: 'type',
      lineStyle: {
        lineWidth: 3,
        lineDash: [5, 5],
      },
      smooth: true,
    },
    {
      geometry: 'line',
      seriesField: 'name',
      point: {},
    },
  ],
});

dualAxes.render();

    }
  },
  created() { },
  mounted() {
    this.createPie()  
    // this.getTempData()
  },
};
</script>
<style scoped></style>